<template>
 <!-- <j-modal
    :title="tt"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okText="nextText"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="prevCancel"
    :maskClosable="false"
    :cancelText="prevText">-->
    <a-drawer
      :title="tt"
      :width="width"
      :visible="visible"
      :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
      @close="prevCancel"
      :maskClosable="false"
    >
    <qy-commodity-form ref="realForm" @ok="submitCallback" @changeLoading="changeLoading" @changeNext="changeNext" @initRecord="initRecord" :disabled="disableSubmit" v-if="tab==1"></qy-commodity-form>
    <qy-commodity-product-form ref="proRealForm" @ok="submitCallback" @changeLoading="changeLoading"  @changeNext="changeNext" :disabled="disableSubmit" v-if="tab==2"></qy-commodity-product-form>
    <qy-commodity-cd-info-form  ref="cdRealForm" @ok="submitCallback" @changeLoading="changeLoading"  @changeNext="changeNext" :disabled="disableSubmit" v-if="tab==3"></qy-commodity-cd-info-form >
    <qy-commodity-check-form ref="checkRealForm" @ok="submitCallback" @changeLoading="changeLoading"  @changeNext="changeNext"  :disabled="disableSubmit"  v-if="tab==4"></qy-commodity-check-form>
    <qy-commodity-adv-form ref="advRealForm" @ok="submitCallback" @changeLoading="changeLoading"  @changeNext="changeNext"  :disabled="disableSubmit"  v-if="tab==5"></qy-commodity-adv-form>
    <qy-commodity-marketing-form ref="marketRealForm" @ok="submitCallback" @changeLoading="changeLoading"  @changeNext="changeNext" :disabled="disableSubmit"  v-if="tab==6"></qy-commodity-marketing-form>
    <qy-business-info-form ref="businessRealForm" @ok="submitCallback" @changeLoading="changeLoading"  @changeNext="changeNext" :disabled="disableSubmit"  v-if="tab==7"></qy-business-info-form>
    <qy-store-form ref="stroeRealForm" @ok="submitCallback" :disabled="disableSubmit" @changeLoading="changeLoading"   v-if="tab==8"></qy-store-form>
  <!--</j-modal>-->
      <div class="drawer-bootom-button" v-show="!disableSubmit">
        <a-popconfirm title="确定放弃编辑？" @confirm="prevCancel" okText="确定" cancelText="取消" v-if="tab==1">
          <a-button style="margin-right: .8rem">{{prevText}}</a-button>
        </a-popconfirm>
        <a-button style="margin-right: .8rem" v-if="tab>1"  @click="prevCancel">{{prevText}}</a-button>
        <a-button @click="handleOk" type="primary" :loading="confirmLoading">{{nextText}}</a-button>
      </div>
    </a-drawer>
</template>

<script>

  import QyCommodityForm from './QyCommodityForm'
  import QyCommodityProductForm from './QyCommodityProductForm'
  import QyCommodityCdInfoForm from './QyCommodityCdInfoForm'
  import QyCommodityCheckForm from './QyCommodityCheckForm'
  import QyCommodityAdvForm from './QyCommodityAdvForm'
  import QyCommodityMarketingForm from './QyCommodityMarketingForm'
  import QyBusinessInfoForm from './QyBusinessInfoForm'
  import QyStoreForm from './QyStoreForm'
  export default {
    name: 'QyCommodityModal',
    components: {
      QyCommodityForm,
      QyCommodityProductForm,
      QyCommodityCdInfoForm,
      QyCommodityCheckForm,
      QyCommodityAdvForm,
      QyCommodityMarketingForm,
      QyBusinessInfoForm,
      QyStoreForm
    },
    data () {
      return {
        tt:'商品信息',
        width:800,
        visible: false,
        disableSubmit: false,
        tab:1,
        nextText:"下一步",
        prevText:"关闭",
        record:{},
        commodityId:'',
        realFormMap:{
            "1":"realForm",
            "2":"proRealForm",
            "3":"cdRealForm",
            "4":"checkRealForm",
            "5":"advRealForm",
            "6":"marketRealForm",
            "7":"businessRealForm",
            "8":"stroeRealForm"
        },
        confirmLoading:false
      }
    },
    methods: {
      add () {
        this.visible=true
        this.$nextTick(()=>{
          this.$refs[this.realFormMap[this.tab]].add();
        })
      },
      edit (record) {
        if(record){
          this.record = record;
          this.commodityId = record.id;
        }
        this.visible=true
        this.$nextTick(()=>{
          this.$refs[this.realFormMap[this.tab]].edit(this.record);
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.$refs[this.realFormMap[this.tab]].submitForm();
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
        this.tab=1;
        this.prevText = "关闭";
        this.nextText = "下一步";
      },
      handleCancel () {
        this.close()
        var that = this;
        setTimeout(function(){
          that.tab=1;
        },100)

      },prevCancel(e) {
        if (e.target.className == "ant-btn") {
          if (this.tab == 1) {
            this.close();
          } else {
            this.tab--;
            if (this.tab == 1) {
              this.prevText = "关闭"
            }
            if(this.tab<8){
              this.nextText = "下一步";
            }
            if(this.tab==1){
              this.edit();
            }else{
              this.toProduct();
            }

          }
        }else{
          this.handleCancel ();
          this.prevText = "关闭"
        }
        this.changeTitle();
      },changeNext(commodityId) {
        this.tab += 1;
        this.prevText = "上一步";
        if(this.tab==8){
          this.nextText = "确认";
        }
        this.commodityId = commodityId;
        this.toProduct();
        this.changeTitle();
      },toProduct(){
        this.visible=true
        this.$nextTick(()=>{
          this.$refs[this.realFormMap[this.tab]].getDetail(this.commodityId);
        });

      },initRecord(record){
        this.record = record;
      },changeTitle(){
        switch (this.tab) {
          case 1:
            this.tt ="商品信息";
            break;
          case 2:
            this.tt ="生产记录";
            break;
          case 3:
            this.tt ="产地信息";
            break;
          case 4:
            this.tt ="监测报告";
            break;
          case 5:
            this.tt ="广告设置";
            break;
          case 6:
            this.tt ="营销设置";
            break;
          case 7:
            this.tt ="企业信息";
            break;
          case 8:
            this.tt ="店铺设置";
            break;
        }
      },changeLoading(flag){
        this.confirmLoading = flag;
      }
    }
  }
</script>
<style>
  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>